<template>
  <div class="home">
    <!-- 运营概况导航栏 -->
    <div class="topBox">
      <div class="left">
        <el-image class="image" :src="require('@/assets/images/work.png')" />
        <div class="title">运营概况 <div class="line"></div>
        </div>
      </div>
      <div class="right">
        <div class="btnBox">
          <span @click.stop.prevent="btn('本月')" class="dateBtn4">
            <span @click.stop.prevent="btn('本周')" class="dateBtn3">
              <span @click.stop.prevent="btn('今天')" class="dateBtn2">
                <span @click.stop.prevent="btn('昨天')" class="dateBtn1">
                  昨 日
                </span>
                今 日
              </span>
              本 周
            </span>
            本 月
          </span>
        </div>
        <!-- 日期 -->
        <div>2024-01-01--2020-01-01</div>
      </div>
    </div>
    <!-- 订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额 :style="'background-image:url(require('./../assets/banner_top2.png'))'"-->
    <div class="box">
      <div class="item"
        :style="{ backgroundImage: 'url(' + require('../../../assets/images/card' + (index + 1) + '.png') + ')' }"
        v-for="(item, index) in quantityData" :key="index">
        <div>{{ item.title }}</div>
        <div class="number">{{ item.number }}<span class="text">{{ item.text }}</span></div>
      </div>
    </div>
    <!-- 退费、退款、充值统计 -->
    <div class="box2">
      <!-- 退费统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">退费统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn('本月')" class="dateBtn2">
                <span @click.stop.prevent="btn('本周')" class="dateBtn1">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="value1" prefix-icon=" " type="daterange" :clearable="false" :editable="false"
                range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 退费树状图 -->
        <div id="refundStatistics" style="width: 505px; height: 300px"></div>
      </div>
      <!-- 退款金额统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">退款金额统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn('本月')" class="dateBtn2">
                <span @click.stop.prevent="btn('本周')" class="dateBtn1">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="value1" prefix-icon=" " type="daterange" :clearable="false" :editable="false"
                range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 退款金额折线图 -->
        <div id="refund" style="width: 505px; height: 300px"></div>
      </div>
      <!-- 在线充值统计 -->
      <div class="item">
        <div class="itemTop">
          <div class="leftTitle">
            <el-image class="image" :src="require('@/assets/images/leave.png')" />
            <div class="title">在线充值统计<div class="line"></div>
            </div>
          </div>
          <div class="rightContent">
            <div>
              <span @click.stop.prevent="btn('本月')" class="dateBtn2">
                <span @click.stop.prevent="btn('本周')" class="dateBtn1">
                  本 周
                </span>
                本 月
              </span>
            </div>
            <div style="cursor: pointer;">
              <el-date-picker v-model="value1" prefix-icon=" " type="daterange" :clearable="false" :editable="false"
                range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>
        <!-- 充值统计图 -->
        <div id="recharge" style="width: 505px; height: 300px"></div>
      </div>
      <!-- 学校订餐情况、请假人员 -->
      <div class="box3">
        <!-- 学校订餐情况 -->
        <div class="left">
          <div class="itemTop">
            <div class="leftTitle">
              <el-image class="image" :src="require('@/assets/images/affair.png')" />
              <div class="title">学校订餐情况统计<div class="line"></div>
              </div>
            </div>
            <div class="rightContent">
              <div>
                <span @click.stop.prevent="btn('本月')" class="dateBtn2">
                  <span @click.stop.prevent="btn('本周')" class="dateBtn1">
                    本 周
                  </span>
                  本 月
                </span>
              </div>
              <div style="cursor: pointer;">
                <el-date-picker v-model="value1" prefix-icon=" " type="daterange" :clearable="false" :editable="false"
                  range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div>
            <!-- 搜索和导出 -->
            <div class="formBox">
              <input class="input" type="text" placeholder="请输入学校的名字"></input>
              <el-button class="btn">搜索</el-button>
              <el-button class="btn">导出</el-button>
            </div>
            <el-table :header-cell-style="rowClass" :data="leavesList" :max-height="300" stripe>
              <el-table-column type="index" align="center" label="序号" />
              <el-table-column label="学校名称" align="center" prop="reason" />
              <el-table-column label="早餐人数" align="center" prop="reason" />
              <el-table-column label="午餐人数" align="center" prop="reason" />
              <el-table-column label="实际人数(早餐)" width="120" align="center" prop="reason" />
              <el-table-column label="实际人数(午餐)" width="120" align="center" prop="reason" />
              <el-table-column label="请假人数(早餐)" width="120" align="center" prop="reason" />
              <el-table-column label="请假人数(午餐)" width="120" align="center" prop="reason" />
              <el-table-column label="请假人数" align="center" prop="reason" />
              <el-table-column label="退费金额" align="center" prop="reason" />
              <el-table-column label="退费日期" align="center" prop="reason" />
            </el-table>
          </div>
        </div>
        <!-- 请假人员 -->
        <div class="right">
          <div class="itemTop">
            <div class="leftTitle">
              <el-image class="image" :src="require('@/assets/images/affair.png')" />
              <div class="title">请假人员<div class="line"></div>
              </div>
            </div>
            <div class="rightContent">
              <div style="cursor: pointer;">
                <el-date-picker v-model="value1" prefix-icon=" " type="daterange" :clearable="false" :editable="false"
                  range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </div>
         <div style="margin-top: 10px;">
          <el-table :header-cell-style="rowClass" :data="leavesList" :max-height="400" stripe>
            <el-table-column type="index" align="center" label="序号" />
            <el-table-column label="学校" align="center" prop="reason" />
            <el-table-column label="班级" align="center" prop="reason" />
            <el-table-column label="姓名" align="center" prop="reason" />
            <el-table-column label="请假天数" align="center" prop="reason" />
            <el-table-column label="请假时间" align="center" prop="reason" />
          </el-table>
         </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
      leavesList: [
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 },
        { "reason": 132 }
      ],
      value1: "",
      //订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额
      quantityData: [
        {
          title: "订餐人数",
          number: "4165415415",
          text: "人"
        },
        {
          title: "实际就餐人数",
          number: "4165415415",
          text: "人"
        },
        {
          title: "请假人数",
          number: "4165415415",
          text: "人"
        },
        {
          title: "退餐人数",
          number: "4165415415",
          text: "人"
        },
        {
          title: "退餐金额",
          number: "4165415415",
          text: "元"
        }
      ]
    }
  },
  mounted () {
    this.refundStatistics()
    this.refund()
    this.recharge()
  },
  created () {
    // setTimeout(()=>{
    //   this.refundStatistics()
    // },1000)
  },
  methods: {
    //设置table标题样式
    rowClass ({ row, rowIndex }) {
      return 'background:#FFCE80'
    },
    btn (type) {
      console.log("5151515", type);
    },
    //退费统计
    refundStatistics () {
      var myChart = echarts.init(document.getElementById('refundStatistics'));
      var option;
      var series = [
        {
          name: "早餐",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          itemStyle: {
            borderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#4EA0FF' },
              { offset: 1, color: '#0073FE' }
            ])
          }
        },
        {
          name: "午餐",
          data: [10, 50, 64, 1, 0, 50, 90],
          type: 'bar',
          itemStyle: {
            borderRadius: [20, 20, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#FF9B00' },
              { offset: 1, color: '#FC5800' }
            ])
          }
        },
      ];
      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          name: "退款人数",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        series: series
      };

      option && myChart.setOption(option);

    },
    // 退款金额统计
    refund () {
      var myChart = echarts.init(document.getElementById('refund'));
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['早餐', "午餐"],

        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          name: "退款金额",
        },
        series: [
          {
            name: "早餐",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#D2E6FF' },
                { offset: 1, color: '#fff' }
              ])
            }
          },
          {
            name: "午餐",
            data: [80, 2002, 91, 34, 10, 130, 120],
            type: 'line',
            color: "#FD3F2E",
            lineStyle: {
              color: "#FD3F2E"
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    //充值统计
    recharge () {
      var chartDom = document.getElementById('recharge');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          name: "充值金额"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
            color: "#27BE4E",
            areaStyle: {
              color: "#D7FCEC",
            }
          }
        ]
      };

      option && myChart.setOption(option);

    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

//默认所有图标图片大小
.image {
  width: 24px;
  height: 23px;
}

.home {
  padding: 10px 34px;
  box-sizing: border-box;
  background-color: #F1F2F6;
  overflow: auto;
}

//运营概况导航栏
.topBox {
  width: 1602px;
  height: 65px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  background-color: #fff;

  .left {
    display: flex;

    .title {
      width: 68px;
      margin-left: 10px;
      position: relative;
      z-index: 0;

      .line {
        position: absolute;
        top: 15px;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 7px;
        border-radius: 5px;
        background-color: #FFCE80;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;

    .btnBox {
      border-radius: 10px;
      width: 170px;
      font-size: 12px;

      .dateBtn4 {
        padding: 5px 10px;
        padding-left: 0;
        background-color: #FFF8DF;
        border-radius: 15px;
        cursor: pointer;

        .dateBtn3 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFCE80;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn2 {
            padding: 5px 10px;
            padding-left: 0;
            background-color: #FFB847;
            border-radius: 15px;
            cursor: pointer;

            .dateBtn1 {
              padding: 5px 10px;
              background-color: #FFA20D;
              border-radius: 15px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}

//订餐人数、实际就餐人数、请假人数、退餐人数、退餐金额
.box {
  width: 1602px;
  margin: 0 auto;
  color: #fff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 20px;

  .item {
    width: 280px;
    height: 150px;
    padding: 10px 20px;
    box-sizing: border-box;
    overflow: hidden;

    .number {
      margin: 20px 0;
      font-size: 32px;
      position: relative;

      .text {
        position: absolute;
        bottom: -20px;

        // margin-top: 40px;
        // box-sizing: border-box;
      }
    }
  }
}

// 退费、退款、充值统计
.box2 {
  width: 1602px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;

  .item {
    width: 33%;
    height: 326px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;

        .dateBtn2 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFF8DF;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn1 {
            padding: 5px 10px;
            background-color: #FFA20D;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }
    }

  }
}

.box3 {
  width: 1602px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .left {
    background-color: #fff;
    width: 1060px;
    height: 400px;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;

        .dateBtn2 {
          padding: 5px 10px;
          padding-left: 0;
          background-color: #FFF8DF;
          border-radius: 15px;
          cursor: pointer;

          .dateBtn1 {
            padding: 5px 10px;
            background-color: #FFA20D;
            border-radius: 15px;
            cursor: pointer;
          }
        }
      }
    }

    // 搜索和导出
    .formBox {
      display: flex;
      margin: 0 0 10px 30px;

      .input {
        border: none;
        outline: none;
        background-color: #FFE2B3;
        width: 150px;
        height: 30px;
        padding: 0 20px;
        box-sizing: border-box;
        border-radius: 20px;
        margin-right: 10px;
      }
      .btn{
        background-color: #FFCE80;
        padding: 0 10px;

      }
    }
  }

  .right {
    width: 519px;
    height: 400px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;

    .itemTop {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftTitle {
        display: flex;
        align-items: center;

        .title {
          margin-left: 10px;
          position: relative;
          z-index: 0;

          .line {
            position: absolute;
            top: 15px;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 7px;
            border-radius: 5px;
            background-color: #FFCE80;
          }
        }
      }

      .rightContent {
        display: flex;
        align-items: center;
        font-size: 12px;
      }
    }
  }
}

::v-deep.el-date-editor .el-range-input {
  cursor: pointer;
}

::v-deep.el-range-editor.el-input__inner {
  padding: 0;
}

::v-deep.el-date-editor--daterange.el-input__inner {
  width: 204px;
  cursor: pointer;
}

::v-deep .el-input__inner {
  cursor: pointer;
  border: none;
}

// 修改斑马纹颜色
::v-deep.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #FFE2B3;
}
</style>